<template>
  <div class="wrapper text-center" v-if="show" @click="close">
    <div class="lz-dialog" ref="box" @click.stop="">
      <div v-if="p_title != null" class="lz-title">
        {{ p_title }}
      </div>
      <div class="lz-items">
        <div v-for="(item, index) in p_data" :key="index" @click="submit(item)" class="lz-item">
          <div>{{ item['name'] }}</div>
          <div class="lz-line"></div>
        </div>
      </div>
      <div class="lz-cancel" @click="close">{{ p_left }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: "lz-sheet",
  props: {
    p_left: {
      type: String,
      default: '取消',
    },
    p_title: null,
    p_show: {
      type: Boolean,
      default: false,
    },
    p_data: Array,
  },
  data() {
    return {
      show: false,
    };
  },
  emits: ['close','submit'],
  watch:{
    p_show(val,oldVal) {
      this.show = val
    },
  },
  methods: {
    close() {
      this.$emit("close", false);
    },
    submit(obj) {
      this.close();
      this.$emit("submit", obj);
    }
  },
});
</script>

<style scoped>
.text-center{
  text-align: center;
}
.wrapper {
  background: #000000ff;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: bottom;
}
.lz-dialog {
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  margin: auto;
  overflow: hidden;
  padding: 10px 0px;
  width: 100%;
}
.lz-title {
  color: #111;
  font-weight: bolder;
}
.lz-items {
  padding: 10px 0px;
}
.lz-item {
  color: #333;
  height: 2.2rem;
  line-height: 2.2rem;
  font-weight: bolder;
}
.lz-line {
  background: #f2f2f2;
  height: 1px;
}
.lz-cancel {
  color: red;
  height: 2rem;
  line-height: 2rem;
}
</style>